
<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

//文本滚动条内容
const scrollbarText = "×××实验室现已开放预约，欢迎同学们············";
const content = ref(null);
console.log(content)

onMounted(() => {
  //文本滚动条
  const scrollWidth = content.value.scrollWidth;
  const containerWidth = content.value.clientWidth;
  const duration = 8000; // Adjust the scrolling speed here

  if (scrollWidth > containerWidth) {
    const keyframes = [
      { transform: `translateX(${scrollWidth}px)` },
      { transform: `translateX(-${scrollWidth}px)` },
    ];

    content.value.animate(keyframes, {
      duration: duration,
      iterations: Infinity,
      easing: "linear",
    });
  }
});

const labInfos = ref( [
  {
    title: "通信与网络实验室",
    intro: "该实验室致力于研究和开发通信和网络技术。学生可以在这个实验室中学习和实践各种通信协议、无线网络、网络安全和云计算等方面的知识。",
    imageUrl: require("../../assets/images/lab1.jpg")
  },
  {
    title: "图像处理与模式识别实验室",
    intro: "这个实验室专注于图像处理和模式识别领域的研究。学生可以学习和实践图像处理算法、模式识别技术和计算机视觉等内容。",
    imageUrl: require("../../assets/images/lab2.jpg")
  },
  {
    title: "嵌入式系统实验室",
    intro: "嵌入式系统实验室致力于研究和开发嵌入式系统技术。学生可以在这个实验室中学习和实践嵌入式系统的设计、开发和调试。",
    imageUrl: require("../../assets/images/lab3.jpg")
  }
]);

//实验室预约
const labAppointData=[
  {id:1,status:'可预约',lab:'431',seatNumber:'01'},
  {id:2,status:'可预约',lab:'431',seatNumber:'02'},
  {id:1,status:'可预约',lab:'431',seatNumber:'03'},
  {id:1,status:'可预约',lab:'431',seatNumber:'04'},
  {id:1,status:'可预约',lab:'431',seatNumber:'05'},
  {id:1,status:'可预约',lab:'431',seatNumber:'06'},
]

//统计导航
const navData=[
  { id: 1, title: '竞赛', count: '1000', path: '/achievement/result/contest', icon: 'icon-jiangpai-shi' },
  { id: 2, title: '软著', count: '100', path: '/achievement/result/soft', icon: 'icon-ruanzhuyuce' },
  { id: 3, title: '专利', count: '100', path: '/achievement/result/patent', icon: 'icon-zhuanli' },
  { id: 4, title: '论文', count: '100', path: '/achievement/result/paper', icon: 'icon-lunwenguanli' } ,
  {id:5,title:'项目',count:'100',path:'/achievement/result/project',icon:'icon-xiangmu'}
]

//跳转路由
const router = useRouter();
const gotoResults=(path)=>{
  router.push({ path: path });
}
</script>
<template>
  <div class="achievementIndex">
    <div class="exachiTitle">
      <div class="titleBox1">
        <span class="enTitle">Excellent achievement</span>
        <span class="chTitle">优秀成果</span>
        <span class="line"></span>
      </div>
      <span class="more" @click="gotoResults(`/achievement/result/contest`)">>>查看更多</span>
    </div>
    <div class="exAchievement">
      <div class="photoBox">
        <img />
        <div class="photoTitle"><h3>成果标题</h3></div>
      </div>
      <div class="photoBox">
        <img />
        <div class="photoTitle"><h3>成果标题</h3></div>
      </div>
      <div class="photoBox">
        <img />
        <div class="photoTitle"><h3>成果标题</h3></div>
      </div>
    </div>

    <div class="labGloryTitle">
      <div class="titleBox2">
        <span class="enTitle">Laboratory Glory</span>
        <span class="chTitle">实验室风采</span>
        <span class="line"></span>
      </div>

      <div class="srollbarBox">
        <i class="iconfont icon-guangbo"></i>
        <div class="scrollbar">
          <div class="content" ref="content">
            <div class="text">{{ scrollbarText }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="labGlory">
      <div
          class="labIntroduction"
          v-for="(item,idx) in labInfos"
          :key="idx"
      >
        <img :src="item.imageUrl"/>
        <div class="introBox">
          <h3 class="introLab">{{ item.title }}</h3>
          <p class="intro">
            {{ item.intro }}
          </p>
        </div>
      </div>
    </div>

    <div class="bottomBox">
      <div class="labAppointment">
        <h3>实验室预约</h3>
        <el-scrollbar height="350px">
          <div class="appointMessage" v-for="(lab, index) in labAppointData" :key="index">
            <el-tag size="large">{{lab.status}}</el-tag>
            <p>实验室{{ lab.lab }}</p>
            <p>座位号：{{ lab.seatNumber }}</p>
          </div>
        </el-scrollbar>
      </div>
      <div class="resultNav">
        <div class="nav" v-for="(nav,navIndex) in navData" :key="navIndex" @click="gotoResults(nav.path)">
          <div class="left">
            <h3>{{nav.title}}</h3>
            <h3>{{ nav.count }}</h3>
          </div>
          <i class="iconfont" :class="nav.icon"></i>
        </div>
        <div class="nav">
          <h3 class="waitMore">· · ·</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.achievementIndex {
  padding-top: 40px;
  padding-bottom: 50px;
}

//标题通用样式
.titleBox1,
.titleBox2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  .enTitle {
    font-size: 14px;
    color: #797979;
  }
  .chTitle {
    font-size: 28px;
    font-weight: bold;
    width: auto;
  }
  .line {
    margin-top: 8px;
    width: 200px;
    border-bottom: 5px solid #3d99ad;
  }
}
//优秀成果标题行
.exachiTitle {
  display: flex;
  position: relative;
  .titleBox1 {
    margin: auto;
    margin-bottom: 30px;
  }
  .more {
    position: absolute;
    right: 400px;
    top: 20px;
    color: #b3b1b1;
    cursor: pointer;
  }
}
//实验室风采标题行
.labGloryTitle {
  display: flex;
  position: relative;
  .titleBox2 {
    margin: auto;
    margin-bottom: 30px;
  }
  .srollbarBox {
    position: absolute;
    right: 200px;
    top: 20px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    padding: 5px;
    width: 270px;
    .icon-guangbo {
      font-size: 25px;
      margin: 0px 10px;
      color: #959595;
    }
    .scrollbar {
      width: 100%;
      overflow: hidden;

      .content {
        display: flex;
        align-items: center;
        white-space: nowrap;
        .text {
          padding-right: 20px;
          font-size: 14px;
        }
      }
    }
  }
}
//优秀成果内容
.exAchievement {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  .photoBox {
    height: 290px;
    position: relative;
    img {
      width: 430px;
      height: 290px;
      background-color: #3d99ad;
    }
    .photoTitle {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 90px;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(67, 67, 67, 0.8)
      );
      h3 {
        font-size: 22px;
        color: white;
        margin-top: 30px;
        margin-left: 25px;
      }
    }
  }
}
//实验室风采
.labGlory {
  display: flex;
  justify-content: center;
  flex-direction: column;
  .labIntroduction {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    img {
      width: 320px;
      height: 190px;
      background-color: #3d99ad;
    }
    .introBox {
      margin-left: 35px;
      width: 650px;
      height: 200px;
      position: relative;
      .introLab {
        position: absolute;
        top: 20px;
      }
      .intro {
        position: absolute;
        top: 50px;
        width: 650px;
        word-wrap: break-word;
        margin-top: 10px;
      }
    }
  }
}

//实验室预约以及统计导航
.bottomBox {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 20px;
  //左侧实验室预约
  .labAppointment {
    width: 500px;
    height: 355px;
    padding: 20px 0px;
    border: 10px solid #f2e394;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    .appointMessage {
      display: flex;
      align-items: center;
      flex-direction: row;
      width: 350px;
      height: 50px;
      padding: 15px 50px 10px 20px;
      justify-content: space-between;
      border-bottom: 1px solid #cdcaca;
      .el-tag {
        font-size: 15px;
      }
    }
    .appointMessage:first-of-type {
      margin-top: 10px;
    }
  }
  //右侧数据统计及导航
  .resultNav {
    width: 525px;
    height: 350px;
    margin-left: 35px;

    display: grid;
    grid-template-columns: repeat(2, 260px);
    .nav {
      background-color: #3d99ad;
      color: white;
      width: 260px;
      height: 135px;
      border: 1px solid white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .left {
        font-size: 20px;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        left: 35px;
      }
      .icon-jiangpai-shi {
        font-size: 110px;
        position: absolute;
        right: 20px;
      }
      .icon-ruanzhuyuce,
      .icon-zhuanli,
      .icon-lunwenguanli,
      .icon-xiangmu {
        font-size: 90px;
        position: absolute;
        right: 30px;
      }
    }
    .waitMore {
      font-size: 30px;
    }
  }
  .nav:hover {
    background-color: aliceblue;
    color: #3d99ad;
  }
}
</style>
